<template>
    <div class="changeDetailg">
        <div>
            <div style="height:40px;">
                <el-button size="mini" style="float:right;" @click="$router.go(-1)">返回</el-button>
            </div>
            <p>变更信息</p>
            <hr>
            <el-form ref="baseForm" class="baseForm" :model="baseForm">
                <div style="display:flex">
                    <el-form-item label="变更内容" />
                    <el-form-item label="原信息" />
                    <el-form-item label="申请变更信息" v-if="status==='1'" />
                </div>
                <div style="display:flex">
                    <el-form-item label="商户名称" />
                    <el-form-item :label="baseForm.oldBaseInfo.name ? baseForm.oldBaseInfo.name : '暂无' " />
                    <el-form-item prop="newBaseInfo.name" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.name" placeholder="商户名称" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="商户简称：" />
                    <el-form-item :label="baseForm.oldBaseInfo.abbreviationName ? baseForm.oldBaseInfo.abbreviationName : '暂无' " />
                    <el-form-item prop="newBaseInfo.abbreviationName" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.abbreviationName" placeholder="商户简称" />

                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="营业执照有效期：" />
                    <el-form-item :label="(baseForm.oldBaseInfo.termValidity ? baseForm.oldBaseInfo.termValidity : '') +'暂无'" />
                    <el-form-item prop="newBaseInfo.termValidity" v-if="status==='1'">
                        <el-form-item>
                            <!-- <el-date-picker v-model="baseForm.newBaseInfo.termValidity" @change="getTime" type="date"
                                value-format="yyyy-MM-dd" /> -->
                            <datePicker :time="baseForm.newBaseInfo.termValidity" @change="getTime" />
                        </el-form-item>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="所在城市或地区：" />
                    <el-form-item :label="baseForm.oldBaseInfo.addressName ? baseForm.oldBaseInfo.addressName  : '暂无' " />
                    <el-form-item prop="newBaseInfo.addressCode" v-if="status==='1'">
                        <el-cascader style="width:100%;" :props="dataTree" v-model="baseForm.newBaseInfo.addressCode">
                        </el-cascader>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="商户地址" />
                    <el-form-item :label="baseForm.oldBaseInfo.detailedAddress ? baseForm.oldBaseInfo.detailedAddress : '暂无' " />
                    <el-form-item prop="newBaseInfo.detailedAddress" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.detailedAddress" placeholder="商户地址" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="法人名称" />
                    <el-form-item :label="baseForm.oldBaseInfo.legalPersonName ? baseForm.oldBaseInfo.legalPersonName : '暂无'" />
                    <!-- <el-form-item prop="newBaseInfo.abbreviationName">
                        <el-input v-model="baseForm.newBaseInfo.abbreviationName" placeholder="法人名称" />
                    </el-form-item> -->
                </div>
                <div style="display:flex">
                    <el-form-item label="法人身份证号" />
                    <el-form-item :label="baseForm.oldBaseInfo.legalPersonCardCode ? baseForm.oldBaseInfo.legalPersonCardCode : '暂无'" />
                    <!-- <el-form-item prop="name">
                        <el-input v-model="baseForm.name" placeholder="法人身份证号" />
                    </el-form-item> -->
                </div>
                <div style="display:flex">
                    <el-form-item label="法人身份证有效期" />
                    <el-form-item :label="baseForm.oldBaseInfo.legalPersonCardValidity ? baseForm.oldBaseInfo.legalPersonCardValidity : '暂无'" />
                    <!-- <el-form-item prop="name">
                        <el-input v-model="baseForm.name" placeholder="法人身份证有效期" />
                    </el-form-item> -->
                </div>
                <div style="display:flex">
                    <el-form-item label="商户联系人" />
                    <el-form-item :label="baseForm.oldBaseInfo.contactsName  ? baseForm.oldBaseInfo.contactsName : '暂无'" />
                    <el-form-item prop="newBaseInfo.contactsName" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.contactsName" placeholder="商户联系人" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="联系人邮箱：" />
                    <el-form-item :label="baseForm.oldBaseInfo.contactsEmaill ? baseForm.oldBaseInfo.contactsEmaill : '暂无'" />
                    <el-form-item prop="newBaseInfo.contactsEmaill" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.contactsEmaill" placeholder="联系人邮箱：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="联系人电话：" />
                    <el-form-item :label="baseForm.oldBaseInfo.mobile ? baseForm.oldBaseInfo.mobile : '暂无'" />
                    <el-form-item prop="newBaseInfo.mobile" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.mobile" placeholder="联系人电话：" />

                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="客服电话：" />
                    <el-form-item :label="baseForm.oldBaseInfo.customerServiceNumber ? baseForm.oldBaseInfo.customerServiceNumber : '暂无'" />
                    <el-form-item prop="newBaseInfo.customerServiceNumber" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.customerServiceNumber" placeholder="客服电话：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="行业类别：" />
                    <el-form-item :label="baseForm.oldBaseInfo.categoryName ? baseForm.oldBaseInfo.categoryName : '暂无'" />
                    <el-form-item prop="newBaseInfo.categoryCode" v-if="status==='1'">
                        <el-cascader style="width:100%;" :props="industryTree"
                            v-model="baseForm.newBaseInfo.categoryCode"></el-cascader>
                    </el-form-item>
                </div>
                <div>
                    <!-- <el-form-item label="变更描述：" prop="newBaseInfo.changeDesc"
                        :rules="[{ required: true, message: '变更描述：' }]" v-if="status==='1'">
                        <el-input v-model="baseForm.newBaseInfo.changeDesc" type="textarea" maxlength="100"
                            placeholder="请填写更改备注" :autosize="{ minRows: 4, maxRows: 6 }" />
                    </el-form-item> -->
                    <el-form-item label="审核意见" prop="remark" :rules="[{ required: true, message: '审核意见' }]"
                        v-if="status==='3'">
                        <el-input v-model="baseForm.remark" type="textarea" maxlength="100" placeholder="请填写审核意见"
                            :autosize="{ minRows: 4, maxRows: 6 }" />
                    </el-form-item>
                </div>
                <div>
                    <el-form-item class="btn-group" v-if="status==='1'">
                        <el-button type="primary" @click="submitForm('baseForm')">确定</el-button>
                        <el-button @click="close">取消</el-button>
                    </el-form-item>
                    <el-form-item class="btn-group" v-if="status==='3'">
                        <el-button type="primary" @click="onSubmit('baseForm', 1)">审核通过</el-button>
                        <el-button type="primary" @click="onSubmit('baseForm', 0)">审核驳回</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    import datePicker from "@/components/model/component/date-picker/startEndTime.vue";
    import { sysAjax } from "Ajax";
    export default {
        components: {
            datePicker
        },
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            baseData: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        data() {
            return {
                baseForm: {
                    oldBaseInfo: {},
                    newBaseInfo: {},
                    remark: ''//审核
                },
                status: this.$route.query.status ? this.$route.query.status : '',
                shRemark: {},//审核信息
            }
        },
        created() {
            this.$route.query.id && this.queryPage();
            this.$route.query.code && this.squeryPage();
            this.dataTree = {
                lazy: true,
                lazyLoad(node, resolve) {
                    let obj = {
                        areaLevel: node.level ? node.level + 1 : 1,
                        areaParentCode: node.value ? node.value : null
                    };
                    sysAjax.merchantInfOelectAreaInfo(obj).then(data => {
                        for (let i in data) {
                            data[i].label = data[i].areaName;
                            data[i].value = data[i].areaCode;
                            data[i].leaf = node.level >= 2
                        }
                        resolve(data)
                    });
                }
            },
                this.industryTree = {
                    lazy: true,
                    lazyLoad(node, resolve) {
                        let obj = {
                            businessLevel: node.level ? node.level + 1 : 1,
                            businessParentCode: node.value ? node.value : null
                        };
                        sysAjax.merchantInfoSselectBusinessInfo(obj).then(data => {
                            for (let i in data) {
                                data[i].label = data[i].businessName;
                                data[i].value = data[i].businessCode;
                                data[i].leaf = node.level >= 2
                            }
                            resolve(data)
                        });
                    }
                }
        },
        mounted() {

        },
        methods: {
            getTime(val) {
                console.log(val, 'jsjs')
                this.baseForm.newBaseInfo.termValidity = val.startTime + "~" + val.endTime;
                // this.queryData.submitEndTime = val.endTime;
            },
            close() {
                // this.$emit('update:visible', false)
                this.$router.go(-1)
            },

            squeryPage() {  // 新增时商户的基本信息
                console.log("新增时商户的基本信息")
                this.loading = true;
                sysAjax.selectMerchantInfo(
                    { code: this.$route.query.code }
                ).then(response => {
                    // console.log(response, '新增基本信息')
                    // this.pageTableData = response.list;
                    this.baseForm.oldBaseInfo = response;
                    this.loading = false;
                });
            },
            // selectMerchantChangeInfos
            queryPage() {
                // console.log("商户的基本信息")
                this.loading = true;
                sysAjax.selectMerchantBaseInfo(
                    { id: parseInt(this.$route.query.id) }
                ).then(response => {
                    // console.log(response, '基本信息')
                    // this.pageTableData = response.list;
                    this.baseForm = response;
                    this.loading = false;
                });
            },
            submitForm(formName) {
                if (!this.baseForm.newBaseInfo && this.baseData.newBaseInfo.length == 0) {
                    return;
                }
                if (this.baseForm.newBaseInfo.addressCode) {
                    this.baseForm.newBaseInfo.addressCode = this.baseForm.newBaseInfo.addressCode.length ? this.baseForm.newBaseInfo.addressCode.toString() : ''
                }
                if (this.baseForm.newBaseInfo.categoryCode) {
                    this.baseForm.newBaseInfo.categoryCode = this.baseForm.newBaseInfo.categoryCode.length ? this.baseForm.newBaseInfo.categoryCode.toString() : ''
                }
                console.log(this.baseForm.oldBaseInfo, '旧值')
                this.baseForm.newBaseInfo.code = this.baseForm.oldBaseInfo.code
                console.log(this.baseForm.newBaseInfo, 'xiugaitijiaoshuju')
                sysAjax.updateMerchantBaseInfo(
                    this.baseForm.newBaseInfo
                ).then(response => {
                    console.log(response, '新增')
                    this.loading = false;
                    this.$router.push("/merchant/change");
                    // this.baseForm.newBaseInfo = this.baseData;
                });
                this.baseForm.newBaseInfo = this.baseData
            },
            onSubmit(formName, state) {//审核
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.shRemark = {
                            code: this.baseForm.oldBaseInfo.code,
                            state: state,
                            remark: this.baseForm.remark,
                            name: this.baseForm.oldBaseInfo.name,
                        }
                        if (this.$route.query.id) {
                            this.shRemark.id = parseInt(this.$route.query.id)
                        }
                        console.log(this.shRemark)
                        sysAjax.verifyMerchantChangeInfo(this.shRemark).then(res => {
                            if (res.ok) {
                                this.$router.go(-1)
                            }
                        })
                    } else {
                        return false;
                    }
                });

            }
        }
    }
</script>
<style lang="scss" scoped>
    .changeDetailg{
        flex-direction: column;
        padding: 20px;
        width: 100%;
    }
</style>
<style lang="scss">
    .baseForm {
        padding: 30px 80px 30px 10px;

        .el-form-item {
            width: 30%
        }
    }

    .basePicture {
        .el-form-item {
            width: 250px !important;

            .el-form-item__label {
                float: none
            }

            .fileEdit {
                position: absolute;
                left: 10px;
                top: 0;
            }
        }
    }

    .btn-group {
        text-align: center;

        .el-form-item__content {
            display: flex;
            justify-content: space-between;
        }
    }
</style>